<!DOCTYPE html>
<html lang="zh">
<head>
  <#assign title="角色管理">
  <#include "/head.html">
</head>
  
<body>
  
  <div class="row">
    
    <div class="col-lg-12">
        <div class="card-body bg-white">
          
          <form id="submitForm" action="system/role/saveRules" method="post">
            <input type="hidden" name="id" value="${role.id}">
          
            <div class="form-group">
              <label for="example-text-input">角色名称</label>
              <input class="form-control" type="text" value="${role.description}" readonly>
            </div>
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="check-all">
                        <label class="custom-control-label" for="check-all">全选</label>
                      </div>
                    </th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </form>
          
        </div>
    </div>
        
  </div>
  

<#include "/footer.html">

<script type="text/javascript">
$(function(){
	// 生成权限
	ajaxGet({ 
		url: 'system/menu/ruleList',
		data: {roleId: $('input[name="id"]').val()},
		async: false,
		success: function(r) {
			if (r.code == 0) {
				setTbody(r.data);
			} else {
				notifyWarning(r.message);
			}
		}
	});
	
    //动态选择框，上下级选中状态变化
    $('input.checkbox-parent').on('change', function(){
        var dataid = $(this).attr("dataid");
        $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));
        
        checkAll();
    });
    $('input.checkbox-child').on('change', function(){
        var dataid = $(this).attr("dataid");
            dataid = dataid.substring(0, dataid.lastIndexOf("-"));
        var parent = $('input[dataid=' + dataid + ']');
        if($(this).is(':checked')){
            parent.prop('checked', true);
            //循环到顶级
            while(dataid.lastIndexOf("-") != 2){
                dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                parent = $('input[dataid=' + dataid + ']');
                parent.prop('checked', true);
            }
        }else{
            //父级
            if($('input[dataid^=' + dataid + '-]:checked').length == 0){
                parent.prop('checked', false);
                //循环到顶级
                while(dataid.lastIndexOf("-") != 2){
                    dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                    parent = $('input[dataid=' + dataid + ']');
                    if($('input[dataid^=' + dataid + '-]:checked').length == 0){
                        parent.prop('checked', false);
                    }
                }
            }
        }
        
        checkAll();
    });
    
    checkAll();
});

/*全选*/
var checkAll = function() {
	if ($('input[name=rules]:not(:checked)').length == 0) {
    	$('#check-all').prop('checked', true);
    } else {
    	$('#check-all').prop('checked', false);
    }
}

/**
 * 菜单
 * @param data 菜单JSON数据
 */
var setTbody = function(data) {
    if (data.length == 0) return false;
    html = createRule(data, '1', 'id', 0);
    $('tbody').append(html);
}

var createRule = function (data, type, pdataid, plevel) {
    var menu_body = '';
    
    for(var i = 0; i < data.length; i++){
    	level = plevel + 1;
    	p_left = level == 1 ? '' : ' style="padding-left: ' + 20*plevel + 'px;"';
    	isButton = data[i].type == 'BUTTON' ? true : false;
    	i_class = isButton ? ' custom-control-inline' : '';
    	c_class = type == '1' ? 'custom-control-input checkbox-parent' : (isButton ? 'custom-control-input checkbox-child' : 'custom-control-input checkbox-parent checkbox-child');
        id = 'role' + pdataid + '-' + data[i].id;
        dataid = pdataid + '-' + data[i].id;
        value = data[i].permissionValue;
        isChecked = data[i].hasPermission ? 'checked' : '';
        label_div = '<label class="custom-control-label" for="' + id + '">' + data[i].name + '</label>';
        
        menu_body += isButton ? '' : '<tr><td' + p_left + '>';
        menu_body += '<div class="custom-control custom-checkbox' + i_class + '">';
        menu_body += '<input type="checkbox" name="rules" class="' + c_class + '" id="' + id + '" dataid="' + dataid + '" value="' + value + '"' + isChecked + '>';
        menu_body += label_div;
        menu_body += '</div>';
        menu_body += isButton ? '' : '</td></tr>';
        
        if (data[i].submenus && data[i].submenus.length > 0) {
        	if (data[i].submenus[0].type == 'BUTTON')  menu_body += '<tr><td style="padding-left: ' + 20*level + 'px;">';
            menu_body += createRule(data[i].submenus, '2', dataid, level);
            if (data[i].submenus[0].type == 'BUTTON') menu_body += '</td></tr>';
        }
    }
    
    return menu_body;
};
</script>
</body>
</html>